<template>
	<view class="root">

		<view class="box" :style="{height: elementHeight}">

			<view class="content">
				<hx-lottie class="lottie" ref="lottieWeb" :options="options" />
			</view>

			<view class="button-box" @click="playpapers(downUrl)">
				{{button}}
			</view>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				elementHeight: '80vh',
				options: {
					autoplay: true,
					data: require("../../static/gold.json")
				},
				button: "立刻下载体验"
			};
		},
		onLoad() {


		}
	}
</script>

<style lang="scss" scoped>
	.root {
		width: 100%;
		height: 100VH;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		padding: 30rpx;
		box-sizing: border-box;

		.box {
			box-sizing: border-box;
			display: flex;
			flex-direction: column;
			justify-content: center;
			width: 100%;
			border: 5%;

			.title {
				width: 100%;
				display: inline-block;
				text-align: center;
				font-weight: bold;
				font-size: 30rpx;

			}

			.content {
				width: 100%;
				height: 50VH;
			}

			.description {
				font-size: 40rpx;
				padding: 20rpx;
				font-family: cursive;
			}

			.button-box {
				display: inline-block;
				padding: 30rpx 60rpx;
				border-radius: 26px;
				color: white;
				font-weight: bold;
				margin: 60rpx 50rpx;
				text-align: center;
				font-family: Helvetica;
				font-size: 36rpx;
				cursor: pointer;
				letter-spacing: 6px;
				animation: pulse 1.5s infinite;
				transition: transform 0.3s;
				position: relative;
				box-sizing: border-box;
				background: linear-gradient(-75deg, #616BFA, #0094ff, #616BFA, #0094ff, #616BFA);
				background-size: 400%;
				animation: gradient 20s linear infinite;

				&:hover {
					transform: scale(1.1);
				}

				&::hover:before {
					/* 悬停时显示阴影 */
					opacity: 1;
				}

				@keyframes pulse {
					0% {
						transform: scale(1);
					}

					50% {
						transform: scale(1.2);
					}

					100% {
						transform: scale(1);
					}
				}

				@keyframes gradient {
					0% {
						background-position: 600%;
					}

					100% {
						background-position: 0%;
					}
				}

			}

		}


	}
</style>